<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<title>index</title>
		<link rel="stylesheet" href="source/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="source/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="source/plugins/datatables/jquery.dataTables.min.css" />
		<link rel="stylesheet" href="source/css/system.css" />
	</head>

	<body>
		<div class="admin-submain">
			<div class="layui-tab layui-tab-brief admin-subtab">

				<ul class="layui-tab-title">
					<li class="layui-this">内容1</li>
					<li data-table="true">内容2</li>
					<li>内容3</li>
					<li>内容4</li>
					<li>内容5</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show"></div>
					<div class="layui-tab-item">
						<div class="search-barbox">
							<div class="search-bar">
								<div class="selectbar">
									<li class="layui-nav-item listbox select-show">
										<a href="javascript:;" class="text-table-turn"><span>选择更改事件</span><i class="layui-icon">&#xe61a;</i></a>
										<dl class="layui-nav-child layui-anim layui-anim-upbit select-table-turn">
											<dd class="layui-this">
												<a href="JavaScript:void(0);">选择更改事件</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">全部列表</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">待审核</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">审核未通过</a>
											</dd>
										</dl>
									</li>
								</div>
								<!--<div class="selectbar">
									<li class="layui-nav-item listbox select-show">
										<a href="javascript:;" class="text-table-turn"><span>选择更改事件</span><i class="layui-icon">&#xe61a;</i></a>
										<dl class="layui-nav-child layui-anim layui-anim-upbit select-table-turn">
											<dd class="layui-this">
												<a href="JavaScript:void(0);">选择更改事件</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">全部列表</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">待审核</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">审核未通过</a>
											</dd>
										</dl>
									</li>
								</div>-->
								<div class="input-search" id="example_filter" style="display: inline;">
									<label class="input-search-inner">
										<span class="ant-input-wrapper">
											<input aria-controls="example" type="search" placeholder="请输入清单编号/项目编号/子项目编号"  data-column="" id="mul_col_filter" name="keyword" class="ant-input">
										</span>
										<i class="search-btn"><img src="source/images/icon-search.png" alt="" /></i>
									</label>
									<button type="button" class="btn-search-advance" id="btn-search-advance">高级搜索</button>
								</div>
							</div>
							<div class="btn-drop-box" id="pLsitHeader">
								<button type="button" class="ant-btn"><span>导 入 </span></button>
							</div>
						</div>
						<div class="operation-bar operation-checkbox">
							<div class="leftpart">
								<button class="btn-icon operation-close"><i class="layui-icon">&#x1006;</i></button>
								<span class="checked-tips">已选择<em>0</em>项</span>
								<span>
									<button class="btn-icon"><i class="layui-icon">&#xe62f;</i>操作1</button>
									<button class="btn-icon"><i class="layui-icon">&#xe608;</i>操作2</button>
									<button class="btn-icon"><i class="layui-icon">&#xe640;</i>删除</button>
								</span>
							</div>
						</div>
						<div class="operation-bar keepon-search">
							<div class="leftpart">
								<span class="checked-tips">搜索结果</span>
								<span>
									<button class="btn-icon" id="clear-search-btn"><i class="fa fa-eraser" aria-hidden="true"></i>清除搜索</button>
									<button class="btn-icon" id="keep-search-btn"><i class="fa fa-search" aria-hidden="true"></i>继续搜索</button>
								</span>
							</div>
						</div>
						<div class="submain-table submain-complextable">
							<table id="qingdan-list" class="table" cellspacing="0" lay-skin="nob" cellspacing="0">
								<thead>
									<tr>
										<th></th>
										<th class="text-center">
											<label for="" class="checkbox">
												<input type="checkbox" id="checkall" />
												<i class="checkbox-inner"></i>
											</label>
										</th>
										<th>清单编号</th>
										<th>项目编号</th>
										<th>项目名称</th>
										<th>子项目编号</th>
										<th>子项目名称</th>
										<th>创建人</th>
										<th>审核状态</th>
										<th>创建时间</th>
										<th class="caozuo" width="50">
											<i class="fa fa-sliders fa-rotate-90 toggle-vis" aria-hidden="true"></i>
										</th>
									</tr>
								</thead>
							</table>
							<div class="caozuo-box" id="caozuo-box">
								<div class="caozuo-mask" onclick="isshow_caozuo('hide')"></div>
								<div class="caozuo-vis" id="caozuo-vis">
									<h3 class="title">选择显示字段</h3>
									<div class="content">
										<ul>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="2"/>
														<i class="checkbox-inner"></i>
													</div>
													清单编号
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="3"/>
														<i class="checkbox-inner"></i>
													</div>
													项目编号
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="4"/>
														<i class="checkbox-inner"></i>
													</div>
													项目名称
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="5"/>
														<i class="checkbox-inner"></i>
													</div>
													子项目编号
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="6"/>
														<i class="checkbox-inner"></i>
													</div>
													子项目名称
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="7"/>
														<i class="checkbox-inner"></i>
													</div>
													创建人
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="8"/>
														<i class="checkbox-inner"></i>
													</div>
													审核状态
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="9"/>
														<i class="checkbox-inner"></i>
													</div>
													创建时间
												</label>
											</li>
										</ul>
									</div>
									<div class="footer">
										<button type="button" class="ant-btn ant-btn-ghost" id="caozuo-visbtn"><span>确 定</span></button>
										<button type="button" class="ant-btn" onclick="isshow_caozuo('hide')"><span>取 消</span></button>
									</div>
								</div>
							</div>
							<div>
								<div class="advanced-search-mask" id="advanced-search-mask" onclick="advanced_cancel()"></div>
								<div class="layui-layer layui-layer-dialog advanced-skin layer-anim" id="advanced-box">
									<div class="layui-layer-title">高级查询</div>
									<div class="layui-layer-content">
										<div class="advanced-search">
											<div class="advanced-box">
												<form class="layui-form">
													<div class="layui-form-item"><label class="layui-form-label">清单编号</label>
														<div class="layui-input-block"><input type="text" name="list_number" autocomplete="off" placeholder="请清单编号" class="layui-input"></div>
													</div>
													<div class="layui-form-item"><label class="layui-form-label">项目编号</label>
														<div class="layui-input-block"><input type="text" name="item_number" autocomplete="off" placeholder="请项目编号" class="layui-input"></div>
													</div>
													<div class="layui-form-item"><label class="layui-form-label">子项目编号</label>
														<div class="layui-input-block"><input type="text" name="subitem_number" autocomplete="off" placeholder="请输入子项目编号" class="layui-input"></div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="layui-layer-btn">
										<a class="layui-layer-btn0" id="advanced-yes">搜 索</a>
										<a class="layui-layer-btn1" id="advanced-cancel" onclick="advanced_cancel()">取 消</a>
										<a class="layui-layer-btn2" id="advanced-clear" onclick="advanced_clear()">清空</a>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="source/plugins/layui/layui.js"></script>
		<script src="source/plugins/datatables/jquery-1.12.4.js"></script>
		<script src="source/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="source/plugins/datatables/dataTables.fixedColumns.js"></script>
		<script src="source/js/datatables-config.js"></script>
		<script src="source/js/system.js"></script>
		<script>
			
			var employee = {
				tableId: "qingdan-list", //table的id
				status: [ //设置哪些列不能排序和搜索
					{
						"searchable": false,
						"orderable": false,
						"targets": [0, 1, 2, 6, 7, 8, 9, 10]
					}, //第n行不进行排序和搜索
					//					{
					//			            "visible": false,//设置哪列不显示
					//			            "targets": [-1]
					//			        }
				],
				order: [
					[3, 'asc']
				], //初始时，按列排序
				scrollX: true, //是否允许横向滚轴
				checkAllId: "checkall", //第一列checkbox的id
				sScrollXInner: '120%', //设置table的宽度
				fixedColumns: { //左右边定位
					"leftColumns": 0,
					"rightColumns": 1
				},
				url: "datas/qingdan.json", //url链接
				filed: [ //列对应
					{
						"data": "list_number",
						"createdCell": function(nTd, sData, oData, iRow, iCol) {
							$(nTd).html(iRow + 1);
						},
						"class": "text-center",
						"width": "30px"
					},
					{
						"data": "list_number",
						"createdCell": function(nTd, sData, oData, iRow, iCol) {
							$(nTd).html('<label for="" class="checkbox">' +
								'<input type="checkbox" class="checkchild" name="' + sData + '"/>' +
								'<i class="checkbox-inner"></i>' +
								'</label>');
						},
						"class": "text-center",
						"width": "50px"
					},
					{
						"data": "list_number"
					},
					{
						"data": "item_number"
					},
					{
						"data": "item_name"
					},
					{
						"data": "subitem_number"
					},
					{
						"data": "subitem_name"
					},
					{
						"data": "creater"
					},
					{
						"data": "status"
					},
					{
						"data": "time"
					},
					{
						"data": "list_number",
						"createdCell": function(nTd, sData, oData, iRow, iCol) {
							$(nTd).html('<i class="fa fa-ellipsis-h" aria-hidden="true"></i>' +
								'<dl class="layui-nav-child layui-anim layui-anim-upbit">' +
								'<dd data-href="qingdan-detail?id=' + sData + '" class="view-detail">' +
								'<a>' +
								'<i class="layui-icon">&#xe63c;</i>物料详情' +
								'</a>' +
								'</dd>' +
								'<dd data-id="' + sData + '">' +
								'<a>' +
								'<i class="layui-icon" class="submit-audit">&#xe62f;</i>提交审核' +
								'</a>' +
								'</dd>' +
								'</dl>');
						},
						"class": "caozuo table-right-caozuo"
					}
				]
			};
			$(".layui-tab-title li").click(function(){
				if($(this).data('table') == true){
					dataTablesInit(employee); //实例化
				}
			})
			

			//高级搜索
			layui.use(['element', 'layer'], function() {
				var element = layui.element(),
					layer = layui.layer;
				$("#btn-search-advance").on('click', function() {
					show_advanced_search();
				})

				$("#advanced-yes").on("click", function() {
					var parent = $("#advanced-box");
					var list_number = parent.find('[name="list_number"]').val();
					var item_number = parent.find('[name="item_number"]').val();
					var subitem_number = parent.find('[name="subitem_number"]').val();
					
					$.ajax({
						url: options.url,
						data: {
							list_number: list_number,
							item_number: item_number,
							subitem_number: subitem_number
						},
						type: "post",
						dataType: "json",
						beforeSend: function() {
							advanced_cancel();
							layer.load(0);
						},
						success: function(data) {
							//处理事件
							layer.closeAll();
							$(".search-barbox").hide();//隐藏高级搜索栏
							$(".keepon-search").show();//显示继续搜索栏
						}
					});
				})
				
				$("#clear-search-btn").on('click', function(){//点击清除搜索
					$(".keepon-search").hide();//隐藏继续搜索栏
					$(".search-barbox").show();//显示高级搜索栏
					
					advanced_clear();//清空form中的值
				})
				
				$("#keep-search-btn").on('click', function(){//点击继续搜索
					show_advanced_search();
				})

				$(document).on('click', '.view-detail', function(e) { //点击物料详情
					e.preventDefault();
					var thisHref = $(this).data('href'); //获取详情的链接
					layer.open({
						type: 2,
						title: '物料详情',
						content: ['wuliao-detail.html'],
						scrollbar: false,
						shade: '.08',
						shadeClose: true,
						area: ['95%', '95%']
					});
				})
			})
			
			//显示高级搜索框
			function show_advanced_search(){
				$("#advanced-box, #advanced-search-mask").css("display", "block");
			}
			//清理高级搜索的val值
			function advanced_clear() {
				$("#advanced-box").find('input[type="text"]').val("");
			}

			//关闭高级搜索
			function advanced_cancel() {
				$("#advanced-box, #advanced-search-mask").css("display", "none");
			}
		</script>
	</body>

</html>